<template>
    <div>
        <header>
            <img src="@/../public/img/左箭头.svg" alt="" @click="$router.go(-1)">
            <van-field v-model="obj.keywords" left-icon="search" placeholder="请输入搜索关键字" @keydown.enter="fn" />
            <span style="margin:0 .3rem" @click="obj.keywords=''">取消</span>
        </header>
        <div v-if="obj.keywords.length<1">
            <h3 style="padding: 0.2rem;">搜索历史
                <van-icon name="delete-o" style="float: right;" @click="remove" />
            </h3>
            <span v-for="(item,index) in searchList" :key="index" class="span" @click="()=>{ obj.keywords=item;fn() }">
                {{item}}
            </span>
        </div>
        <cartList v-for="(item,index) in list" :key="index" :item="item" v-else></cartList>
        <van-empty description="未查找到数据" v-show="status" />
    </div>
</template>

<script>
import { course } from '@/http/api'
import cartList from '@/components/cartList.vue'
export default {
    components: {
        cartList
    },
    data() {
        return {
            //搜索参数
            obj: {
                course_type: 0,
                limit: 5,
                page: 1,
                keywords: ''
            },
            list: [],
            status: false,
            searchList: JSON.parse(localStorage.getItem('msmkSearch')) || []
        }
    },
    methods: {
        async fn() {
            let arr = JSON.parse(localStorage.getItem('msmkSearch')) || []
            let i = arr.findIndex(item => item == this.obj.keywords)
            if (i != -1) {
                arr.splice(i, 1)
                arr.unshift(this.obj.keywords)
                console.log(arr);
            } else {
                arr.unshift(this.obj.keywords)
                console.log(arr);
            }
            this.searchList = arr
            localStorage.setItem('msmkSearch', JSON.stringify(arr))
            let res = await course(this.obj)
            console.log(res);
            this.list = res.data.data.list
            if (this.list.length == 0) {
                this.status = true
            }
        },
        //清除历史记录
        remove() {
            localStorage.removeItem('msmkSearch')
            this.searchList = []
        }
    },
    watch: {
        'obj.keywords': {
            immediate: true,
            handler(newValue, oldValue) {
                if (newValue === '') {
                    this.list = []
                    this.status = false
                }
            }
        }
    }

}
</script>

<style lang="scss" scoped>
header {
    width: 100%;
    height: 1.2rem;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;

    >img {
        width: 1rem;
        height: .6rem;
    }
}

:deep(.van-field) {
    background-color: #f7f8fa;
    flex: 1;
    line-height: .6rem;
}

.span {
    padding: .1rem .2rem;
    background-color: #fff;
    margin: .2rem;
    color: rgb(160, 157, 157);
    border-radius: .03rem
}
</style>